import React, { useState } from 'react'
import { Outlet } from 'react-router-dom'
import { Layout as AntdLayout, Menu } from 'antd'
import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  UploadOutlined,
  UserOutlined,
  VideoCameraOutlined,
} from '@ant-design/icons'
import Classes from './layouts.module.scss'

const { Header, Sider, Content, Footer } = AntdLayout


const MenuArr = [
  {
    key: '1',
    icon: <UserOutlined />,
    label: 'nav 1',
  },
  {
    key: '2',
    icon: <VideoCameraOutlined />,
    label: 'nav 2',
  },
  {
    key: '3',
    icon: <UploadOutlined />,
    label: 'nav 3',
  },
]

const Layout = () => {
  const [collapsed, setCollapsed] = useState(false)

  return (
    <AntdLayout className={Classes.layout}>
      <Sider className={Classes.sider} trigger={null} collapsible collapsed={collapsed} theme="light">
        <div className={Classes.logo} />
        <Menu
          mode="inline"
          defaultSelectedKeys={['1']}
          items={MenuArr}
        />
      </Sider>
      <AntdLayout>
        <Header className={Classes.header}>
          {React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
            className: 'trigger',
            onClick: () => setCollapsed(!collapsed),
          })}
        </Header>
        <Content className={Classes.siteContent}>
          <Outlet/>
          <Footer className={Classes.footer}>Copyright ©2022 DK rights reserved</Footer>
        </Content>
      </AntdLayout>
    </AntdLayout>
  )
}

export default Layout
